<template>
   <PanelSplitTwo bottomToolbarHeight="0" :num="2">
    <template #top>
      <SetUserSelect
        :key="keys"
        class="queryForm"
        :formData="orderSelect"
        v-model:queryParams="paginationParams"
        @selectFunc="selectFunc"
      ></SetUserSelect>
    </template>
     <template #centerToolbar>
        <div class="vex_flex">
          <el-row :gutter="20" style="margin-bottom: 10px">
            <el-col :span="1.5">
              <el-button @click="handleQuery(0)">新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button :disabled="!Id" @click="handleQuery(1)">查看</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button  @click="handleExport">导出</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button  @click="ImportingFiles">导入</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button  @click="ImportingFiles(1)">导入科室</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
              <el-button @click="handleQuery">取消</el-button>
            </el-col> -->
          </el-row>
        <VxeTableGrid
          style="flex: 1;"
          :tableColumn="tableColumn"
          :tableLoading="tableLoading"
          :dataList="dataList"
          :showPagination="true"
          :paginationParams="paginationParams"
          @getList="setQueryParams"
          @selectedChange="selectedChange"
        >
        </VxeTableGrid>
        
      </div>
      <el-dialog
        v-model="dialogVisible"
        title="科室"
        width="30%"
        :before-close="handleClose"
      >
        <VxeTableGrid
          style="height: 200px;"
          :tableColumn="tableColumns"
          :dataList="dataLists"
          :showPagination="false"
        >
        </VxeTableGrid>
        <template #footer>
          <span class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">Cancel</el-button> -->
            <el-button type="primary" @click="dialogVisible = false"
              >确认</el-button
            >
          </span>
        </template>
      </el-dialog>
      <FileUploadNew :key="keys" :down="downUrl" :url="urls" ref="fileIstrue" @succFun="succFun"></FileUploadNew>
     </template>
   </PanelSplitTwo>
  
</template>

<script setup lang="jsx">
import { useRouter } from 'vue-router'
import { forceLogout, list as initData } from "@/api/monitor/online";
import { hospitalList, getCityTree, department } from "@/api/basicManagement/hospital";
import { watch, getCurrentInstance, ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import datas from './data.js'
let keys = ref(0);
const { paginationParams, orderSelect }  = datas
const { proxy } = getCurrentInstance();
const router= useRouter ()
const dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
}
const { new_hospital_level, new_hospital_status, new_hospital_type } = proxy.useDict("new_hospital_level", "new_hospital_type", "new_hospital_status");
watch(
  new_hospital_level,
  (newV, oldV) => {
    orderSelect[3].selectData = new_hospital_level.value;
    keys.value = new Date().getTime();
  }
);
watch(
  new_hospital_status,
  (newV, oldV) => {
    orderSelect[4].selectData = new_hospital_status.value;
    keys.value = new Date().getTime();
  }
);
const initGetCityTree = () => {
  getCityTree().then((response) => {
    orderSelect[1].selectData = response.data;
    keys.value = new Date().getTime();
    // this.baseCityList = this.handleTree(response.data, "id", "pid")
    // this.baseCityList = this.setTreeData(response.data, 'children')
  })
}
const tableColumns = ref([
  { field: "departmentName", title: "科室" },
])
const dataLists = ref([])
const tableColumn = ref([
  { type: "radio", width: 60, fixed: null },
  { field: "name", title: "名称" },
  { field: "province", title: "省份" },
  { field: "city", title: "城市" },
  { field: "area", title: "区县"},
  { field: "address", title: "地址" },
  { field: "level", title: "等级",
  slots: { default: ({ row }, h) => {
    return [<dict-tag options={ new_hospital_level.value } value={ row.level }></dict-tag>]
  }} },
  { field: "type", title: "类型",
  slots: { default: ({ row }, h) => {
    return [<dict-tag options={ new_hospital_type.value } value={ row.type }></dict-tag>]
  }} },
  { field: "departmentSum", title: "科室", slots: { default: ({ row }) => [
    <span>
      <el-button type="text" icon="el-icon-edit" onClick={() => { handleUpdate(row)}}>{ row.departmentSum }</el-button>
    </span>
  ]}},
  { field: "status", title: "状态",
  slots: { default: ({ row }, h) => {
    return [<dict-tag options={ new_hospital_status.value } value={ row.status }></dict-tag>]
  }} },
])
const handleUpdate = (row) => {
  department({
    id: row.id
  }).then((res) => {
    dialogVisible.value = true
    dataLists.value = res.rows
  })
  
}
initGetCityTree()
const onlineList = ref([]);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
let tableLoading = ref(false)
const dataList = ref([
])

const queryParams = ref({
  ipaddr: undefined,
  userName: undefined
});
// 切换分页
  function setQueryParams(val) {
    console.log(val)
    paginationParams.pageNum = val.pageNum;
    paginationParams.pageSize = val.pageSize;
    hospitalLists()
  }
  let Id = ref('')
  // 选择表格
  function selectedChange(val) {
    Id.value = val.currentItem.id
    // this.form.customerId = val.currentItem.customerId;
  }
function getList() {
  initData(queryParams.value).then(response => {
    onlineList.value = response.rows;
    total.value = response.total;
  });
}
/** 新增|修改 */
function handleQuery(type) {
  router.push({
    path: '/basicInformation/newHospital',
    query: {
      id: type == 1? Id.value : undefined,
      type: type == 1? undefined : 'add'
    }
  })
}
/** 强退按钮操作 */
function handleForceLogout(row) {
    proxy.$modal.confirm('是否确认强退名称为"' + row.userName + '"的用户?').then(function () {
  return forceLogout(row.tokenId);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

const hospitalLists = () => {
  // platformNum
  hospitalList({
    ...paginationParams.value,
    province: paginationParams.value.platformNum?.[0],
    city: paginationParams.value.platformNum?.[1],
    area: paginationParams.value.platformNum?.[2],
    platformNum: undefined
  }).then((res) => {
    paginationParams.value.total = res.total
    dataList.value = res.rows
  })
}
hospitalLists()
const selectFunc = () => {
  paginationParams.value.pageNum = 1
  hospitalLists()
}
const handleExport = () => {
  proxy.download("/base/hospital/export", {
    ...paginationParams.value
  }, `config_${new Date().getTime()}.xlsx`);
}
// getList();
const succFun = (val) => {
  if (val.status == 0) {
    proxy.$modal.msgSuccess(`上传成功`);
    hospitalLists()
  } else {
    ElMessageBox.confirm(
      val.msg,
      {
        confirmButtonText: '确认',
        type: 'warning',
        draggable: true,
        showCancelButton: false,
      }
    )
  }
}
const downUrl = ref('')
const urls = ref('/base/hospital/import-hd')
const fileIstrue = ref('fileIstrue')
const ImportingFiles = (type) => {
  if (type == 1) {
    urls.value = '/base/hospital/import-hd'
    downUrl.value = 'https://mkt.zjkqjt.com/profile/report/templates/hospital_department.xlsx'
  } else {
    urls.value = '/base/hospital/import'
    downUrl.value = 'https://mkt.zjkqjt.com/profile/report/templates/hospital.xlsx'
  }
   
  fileIstrue.value.openTure()
  // proxy.$refs.fileIstrue.openTure()
  
}
</script>
<style scoped>
  .app-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 85px);
    overflow: hidden;
  }
  .vex_flex {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
  }
  .flexmin {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
</style>